<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import {
    useStatisticProcessTimeReport,
    useStatisticProcessTimeReportExport,
    useStatisticsInit,
} from "@fl/api/elevator-api";
import { SubmitBtn } from "@fl/components";
import dayjs from "dayjs";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps } from "vxe-table";
function disabledDate(time) {
    return dayjs(time).isAfter(dayjs(new Date()).format("YYYY-MM-DD"));
}
const gridOptions3 = reactive<VxeGridProps>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: "areaName", title: "区（街道）" },
        { field: "submitCount", title: "需求提报", sortable: true },
        {
            title: "业主意见征询",
            children: [
                {
                    field: "ownerCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "ownerAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
        {
            title: "可行性分析",
            children: [
                {
                    field: "feasibilityCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "feasibilityAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
        {
            title: "联合审查",
            children: [
                {
                    field: "reviewCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "reviewAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
        {
            title: "电梯使用登记",
            children: [
                {
                    field: "useCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "useAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
        {
            title: "竣工验收登记",
            children: [
                {
                    field: "completionCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "completionAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
        {
            title: "全周期",
            children: [
                {
                    field: "allCount",
                    title: "完成单量(台)",
                    sortable: true,
                },
                {
                    field: "allAvgDays",
                    title: "平均办理时长(天)",
                    sortable: true,
                },
            ],
        },
    ],
    data: [],
    footerData: [],
    showFooter: true,
    showOverflow: true,
});
const initialProcessTimeParams = {
    startTime: "",
    endTime: "",
};
const processTimeParams = ref(cloneDeep(initialProcessTimeParams));
const {
    data: processTimeData,
    isLoading: processTimeLoading,
    refetch: processTimeRefetch,
} = useStatisticProcessTimeReport(processTimeParams); //各区（街道）安装进度时长
const { isLoading: initLoading, refetch: initReftch } = useStatisticsInit();
const processExprotTimeParams = computed(() => {
    return {
        startTime: processTimeParams.value.startTime,
        endTime: processTimeParams.value.endTime,
    };
});

const {
    isPending: exportProgressTimePending,
    mutateAsync: exportProgressTimeMutate,
} = useStatisticProcessTimeReportExport(processExprotTimeParams);
async function exportTimeProgress() {
    const res = await exportProgressTimeMutate();
    if (res) {
        const objectUrl = URL.createObjectURL(res);
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl);
    }
}
watchEffect(() => {
    if (processTimeData.value) {
        gridOptions3.data = cloneDeep(processTimeData.value.slice(0, -1));
        gridOptions3.footerData = cloneDeep(processTimeData.value.slice(-1));
    }
});
const chooseProcessTime = ref([]);
function processTimeSubmit() {
    processTimeParams.value.startTime = chooseProcessTime.value[0]
        ? chooseProcessTime.value[0] + " 00:00:00"
        : "";
    processTimeParams.value.endTime = chooseProcessTime.value[1]
        ? chooseProcessTime.value[1] + " 23:59:59"
        : "";
}
function resetProcessTime() {
    processTimeParams.value = cloneDeep(initialProcessTimeParams);
    chooseProcessTime.value = [];
}
async function processTimeRefresh() {
    await initReftch();
    await processTimeRefetch();
}
const processTimeRefreshLoading = computed(() => {
    return initLoading.value || processTimeLoading.value;
});
</script>

<template>
    <ElCard class="mb20" shadow="hover">
        <div class="font-550 mb20 text-18 flex items-center justify-between">
            <div class="flex items-center">
                各区（街道）办理效率
                <div class="filter-box ml-10 flex items-center">
                    <el-date-picker
                        style="margin-right: 10px"
                        v-model="chooseProcessTime"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        size="small"
                        :disabled-date="disabledDate"
                    />

                    <SubmitBtn
                        @click="resetProcessTime"
                        :isLoading="processTimeLoading"
                        type="default"
                        >重置</SubmitBtn
                    >
                    <SubmitBtn
                        @click="processTimeSubmit"
                        :isLoading="processTimeLoading"
                        type="primary"
                        >搜索</SubmitBtn
                    >
                </div>
            </div>
            <div class="flex items-center">
                <div
                    class="color-[#235FC4] flex items-center font-400 mr20 cursor-pointer"
                >
                    <!-- 安装进度的刷新需要调两个接口（后台并不是实时刷新数据，所以需要掉一次暗门接口） -->
                    <!-- <div>刷新</div>
            <el-icon><Refresh /></el-icon> -->
                    <el-button
                        :icon="Refresh"
                        :loading="processTimeRefreshLoading"
                        @click="processTimeRefresh"
                        >刷新</el-button
                    >
                </div>
                <SubmitBtn
                    @click="exportTimeProgress"
                    :isLoading="exportProgressTimePending"
                    type="primary"
                    >导出</SubmitBtn
                >
            </div>
        </div>
        <vxe-grid
            ref="xGrid"
            v-bind="gridOptions3"
            align="center"
            class="mb12"
            :loading="processTimeLoading"
        >
        </vxe-grid>
        <div class="font-400 fontsize-14 color-[#86909C]">
            标注说明：
            <br />
            &ensp;&ensp;
            1.征询业主意见环节的平均办理时长，仅统计已完成该环节且时间顺序有效的案例（需求提报时间
            ≤ 业主征询完成时间）。
            时序异常的记录已自动排除，不纳入计算。其他环节存在此类情况，同理处理。
            <br />
            &ensp;&ensp;
            2.全周期指完成业主意见征询时间到完成竣工验收登记。其办理时长=完成竣工验收登记时间-完成业主意见征询时间。
        </div>
    </ElCard>
</template>
